<template>
  <div class="app-container">
    <div class="mycontent">
      <el-row :gutter="40" type="flex">
        <el-col :span="6">
          <el-menu
            class="el-menu-vertical-demo"
            router
           >
            <el-menu-item index="/front/wallpaper" class="menucenter">
              <i class="el-icon-menu"></i>
              <span slot="title">标签云</span>
            </el-menu-item>
            <el-menu-item index="/front/mytop" class="menucenter">
              <i class="el-icon-document"></i>
              <span slot="title">网站统计</span>
            </el-menu-item>
            <el-menu-item index="/front/mygood" class="menucenter">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">资源留言</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col>
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <h1>资源留言</h1>
            </div>
            <div class="text">
              <h3>评论</h3>
              <span class="smalltext">抢沙发</span>
            </div>
            <div class="bg">
              <h3 class="bgtitle">评论前必须登录！</h3>
              <div>
                <el-button type="warning" class="btlogn" size="medium" @click="loginDialogVisible = true">登录</el-button>
                <el-button type="info" plain size="medium" @click="registerDialogVisible = true">注册</el-button>
              </div>
            </div>
          </el-card>

        </el-col>
      </el-row>
    </div>
    <div class="footer">
      <p>版权所有 &copy; 2023 示例公司</p>  
      <p>联系我们: <a href="#">example@example.com</a></p>  
      <p><a href="#">网站地图</a></p>  
    </div>
    
    <el-dialog :visible.sync="loginDialogVisible" width="500px">
      <span slot="title" class="title">登录</span>
      <el-form :model="form" label-width="50px" :rules="rules" label-position="top">
        <el-form-item prop="account">
          <span slot="label">用户名邮箱</span>
          <el-input placeholder="请输入您的用户名或邮箱" v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <span slot="label">密码</span>
          <el-input placeholder="请输入您的密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning">登录</el-button>
          <el-button type="warning" plain @click="canel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="registerDialogVisible" width="500px">
      <span slot="title" class="title">注册</span>
      <el-form :model="form" label-width="50px" :rules="rules" label-position="top">
        <el-form-item prop="username">
          <span slot="label">昵称</span>
          <el-input placeholder="请输入您的昵称" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="useremail">
          <span slot="label">邮箱</span>
          <el-input placeholder="请输入您的邮箱" v-model="form.useremail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning">快速注册</el-button>
          <el-button type="warning" plain @click="canel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      loginDialogVisible:false,
      registerDialogVisible:false,
      title:'',
      form:{
        account:'',
        username:'',
        useremail:'',
        password:''
      },
      rules: {
        account:[
        { required: true, message: "用户名或邮箱不能为空", trigger: "blur" }
        ],
        username:[
        { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        useremail:[
        { required: true, message: "用户邮箱不能为空", trigger: "blur" }
        ],
        password:[
        { required: true, message: "用户密码不能为空", trigger: "blur" }
        ],
      }
    }
  },
  methods:{
    handleLogin() {  
      // 处理登录逻辑  
      this.loginDialogVisible = false; // 登录完成后关闭对话框  
    },  
    handleRegister() {  
      // 处理注册逻辑  
      this.registerDialogVisible = false; // 注册完成后关闭对话框  
    },
    canel(){
      this.form.username='';
      this.form.useremail='';
      this.form.password='';
      this.form.account='';
      this.registerDialogVisible = false;
      this.loginDialogVisible = false;
    }
  }
};
</script>

<style scoped>
.title{
  font-weight: bold;
  font-size: 16px;
  color: #666;
}
.el-form-item{
  width: 80%;
  margin: 0 auto 20px auto;
}
.menucenter{
  text-align: center;
}
.btlogn{
  width: 100px;
}
.bgtitle{
  margin-bottom: 15px;
  color: #777777;
  font-size: 18px;
  font-weight: normal;
}
.bg{
  background-color: #F6F6F6;
  width: 100%;
  text-align: center;
  padding: 50px 20px;
}
.text{
  margin-top: 40px;
  margin-bottom: 25px;
}
.smalltext{
  margin-left: 5px;
  font-size: 10px;
  color: #999999;
}
h3{
  margin: 0;
  font-weight: bold;
  display: inline-block;
}
.el-card{
  margin: 0 15px;
  min-height: 650px;
  padding: 15px 20px;
}
.clearfix{
  text-align: center;
}
.el-menu-vertical-demo{ 
  border: 1px solid #E6EBF5;
}
.app-container{
    padding: 0px;
}
.mycontent{
    margin: 0px 80px;
    
}
.footer {  
  margin-top: 80px;
  background-color: #333;  
  color: #fff;  
  padding: 20px;  
  text-align: center;  
  width: 100%;  
}  
</style>



